import React ,{FC,useEffect} from 'react'
import { ProductCard, Image } from 'react-vant';
import {DataItem, DataList,RootDispatch} from "../utils/index"
import Bscroll from "better-scroll"
import {useDispatch} from "react-redux"
import {useNavigate} from "react-router-dom"
import {get_list,add_list,del_children_data,set_details_data} from "../api/index"
import _ from "lodash"
type Props = {
  data_content:DataList,
  active?:number
}

let BS:any = null
const My_content:FC<Props> = ({data_content,active}) => {
  const dispatch:RootDispatch = useDispatch()
  const navigate = useNavigate()
  useEffect(()=>{
    let All_conetnt:any = window.document.querySelectorAll(".tab-content")
    console.log(All_conetnt);
    
    BS = new Bscroll(All_conetnt[active as number],{
      click:true,
      probeType:3,
      pullDownRefresh:true,
      pullUpLoad:true
    })
    BS.on("pullingUp",_.throttle(pullingUp,1000) )
    BS.on("pullingDown",_.debounce(pullingDown,3000))
    return () => {
      BS.destroy()
    }
  },[active])

  const pullingUp = () => {
    console.log("pullingUp");
    dispatch(add_list())
    BS.finishPullUp()
    BS.refresh()
  }
  const pullingDown = () => {
    console.log("pullingDown");
    window.location.reload()
    dispatch(get_list())
    BS.finishPullDown()
  }
  
  return (
    <div className='tab-content'>
      <div>
        {
            data_content&& data_content.map((item:DataItem,index:number)=>{
              return  <ProductCard
                onClick={()=>{
                  navigate("/details/"+item.id,{state:item})
                  dispatch(set_details_data(item))
                }}
                key={index}
                priceTop={item.type}
                desc={item.title_content}
                title={item.title}
                bottom={<div style={{display:"flex"}}>
                  <p>like:{item.like_count}</p>
                  <p>comments:{item.comments_count}</p>
                </div>}
                thumb={<div style={{display:"flex",alignItems:"center"}}>
                  <Image src={item.img} lazyload/>
                  <span onClick={()=>{
                    dispatch(del_children_data(item))
                  }}>X</span>
                </div>}
              />
            })
        }
      </div>
       
    </div>
  )
}

My_content.defaultProps={
  active:0
}

export default My_content